<template>
  <div>
    <div id="pie" style="width: 600px;height:400px; border: grey solid 1px; margin: 20px;background-color: lightskyblue; display: inline-block;"></div>
    <div id="bar" style="width: 600px;height:400px; border: grey solid 1px; margin: 20px;background-color: lightskyblue; display: inline-block;"></div>
    <div id="line" style="width: 600px;height:400px; border: grey solid 1px; margin: 20px;background-color: lightskyblue; display: inline-block;"></div>
  </div>
</template>

<script>
import {save} from '@/api/org'

export default {
  props: {
    drawer: Boolean,
  },
  data() {
    return {
      charts: '',
      pieOptions: {},
      lineOptions: {},
      barOptions: {},
    }
  },
  mounted() {
    var pieChart = this.$echarts.init(document.getElementById('pie'));
    var lineChart = this.$echarts.init(document.getElementById('line'));
    var barChart = this.$echarts.init(document.getElementById('bar'));
    this.pieOptions = {
      title: {
        text: "部门项目饼状图",
        left: 'center',
        top: 30
      },
     /* xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },*/
      /*series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }]*/
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 274, name: '联盟广告'},
            {value: 235, name: '视频广告'},
            {value: 400, name: '搜索引擎'}
          ].sort(function (a, b) { return a.value - b.value; }),
          roseType: 'radius',
          label: {
            color: 'rgba(17,104,246, 2)'
          },
          labelLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            smooth: 0.2,
            length: 10,
            length2: 20
          },


          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    }
    pieChart.setOption(this.pieOptions)
    lineChart.setOption(this.lineOptions)
    barChart.setOption(this.barOptions)
  },
  methods: {
    close() {
      this.$emit("close", false)
    },
    submit() {
      save(this.pieOptions).then(() => {
        this.close()
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success'
        });
      }).catch(() => {
        this.close()
        this.$notify.error({
          title: '错误',
          message: '保存失败'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
